<template>
  <view class="env-test">
    <uni-card title="环境变量测试" margin="20rpx">
      <view class="env-item" v-for="(value, key) in envVars" :key="key">
        <text class="env-key">{{ key }}:</text>
        <text class="env-value">{{ value || '未定义' }}</text>
      </view>
    </uni-card>
    
    <uni-card title="配置信息" margin="20rpx">
      <view class="config-item">
        <text class="config-label">数据源类型:</text>
        <text class="config-value">{{ config.dataSource }}</text>
      </view>
      <view class="config-item">
        <text class="config-label">使用Mock:</text>
        <text class="config-value">{{ config.useMock ? '是' : '否' }}</text>
      </view>
      <view class="config-item">
        <text class="config-label">调试模式:</text>
        <text class="config-value">{{ config.debug ? '开启' : '关闭' }}</text>
      </view>
      <view class="config-item">
        <text class="config-label">API地址:</text>
        <text class="config-value">{{ config.baseURL }}</text>
      </view>
    </uni-card>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { API_CONFIG } from '@/config/index.js'

const envVars = ref({})
const config = ref({})

onMounted(() => {
  // 获取所有以 VITE_ 开头的环境变量
  const allEnvVars = import.meta.env
  const viteEnvVars = {}
  
  Object.keys(allEnvVars).forEach(key => {
    if (key.startsWith('VITE_') || key === 'NODE_ENV' || key === 'MODE') {
      viteEnvVars[key] = allEnvVars[key]
    }
  })
  
  envVars.value = viteEnvVars
  config.value = API_CONFIG
  
  console.log('环境变量:', allEnvVars)
  console.log('配置信息:', API_CONFIG)
})
</script>

<style scoped>
.env-test {
  padding: 20rpx;
}

.env-item {
  display: flex;
  margin-bottom: 20rpx;
  padding: 10rpx 0;
  border-bottom: 1rpx solid #eee;
}

.env-key {
  flex: 1;
  font-weight: bold;
  color: #333;
}

.env-value {
  flex: 2;
  color: #666;
  word-break: break-all;
}

.config-item {
  display: flex;
  margin-bottom: 20rpx;
  padding: 10rpx 0;
  border-bottom: 1rpx solid #eee;
}

.config-label {
  flex: 1;
  font-weight: bold;
  color: #333;
}

.config-value {
  flex: 2;
  color: #666;
  word-break: break-all;
}
</style>